<template>
  <div>
    <div class="page-result" v-if="!dataTableObj.isHideStatus">
      <div class="normal-operate">
        <slot name="operate"></slot>
        <div class="page-bar-operate" v-show="!dataTableObj.pageObj.hideReload">
          <div class="page-name">查询结果列表</div>
          <div class="page-fresh" @click="pageReload">刷新</div>
          <div class="page-status success" v-show="dataTableObj.pageObj.searchStatus === 1"><img
            src="../../../static/img/pageBar/search_success.png" alt="">查询成功
          </div>
          <div class="page-status fail" v-show="dataTableObj.pageObj.searchStatus === 0"><img
            src="../../../static/img/pageBar/search_fail.png" alt="">查询失败
          </div>
          <div class="page-status waiting" v-show="dataTableObj.pageObj.searchStatus === 2"><img
            src="../../../static/img/pageBar/search_waiting.png" alt="">正在查询中
          </div>
        </div>
      </div>
      <div class="special-operate">
        <slot name="special-operate"></slot>
      </div>
    </div>
    <!-- 表格数据 -->
    <div class="data-table">
      <el-table :empty-text="childLoad" :data="dataTableObj.tableData" @selection-change="handleSelectionChange"
                ref="datatable" stripe>
        <!-- 放置只读数据  -->
        <el-table-column v-for="(column, key, index) in dataTableObj.tableColumns" :key="column.id"
                         :prop="column.attributeName"
                         align="center" :label="column.text" :min-width="column.width">
        </el-table-column>

        <slot></slot>
      </el-table>
    </div>
    <!-- 翻页数据 -->
    <div class="pageBar">
      <pageBar :pageObj="dataTableObj.pageObj" v-on:changeSearchPageSize="changePageSize"
               v-on:changeSearchPageNo="changePageNo"></pageBar>
    </div>

  </div>

</template>

<script>

  import pageBar from '../pageBar/pageBar'

  export default {
    data() {
      return {
        multipleSelection: [],
      }
    },
    name: "dataTable",
    components: {
      pageBar
    },
    props: ['dataTableObj', 'childLoad'],
    methods: {
      changePageSize(val) {
        // 切换第几页
        this.$emit('getPageSize', val)
      },
      changePageNo(val) {
        // 切换每页数目
        this.$emit('getPageNo', val)
      },
      // 表格选框勾选
      handleSelectionChange(val) {
        // 判断是否翻页,点击翻页的时候跳出,不进行重置

        if (this.dataTableObj.tableData.length <= 0) {
          return
        }
        this.$emit('selectChange', val);
      },

      // 默认勾选
      toggleChange(rows) {
        setTimeout(() => {
          if (rows) {
            rows.forEach(row => {
              this.$refs.datatable.toggleRowSelection(row);
            });
          }
        }, 100)
      },
      // 页面刷新
      pageReload() {
        this.$emit('handlePageReload');
      },

      // // 页面从新加载
      // pageReload() {
      //   // 先定义一个空页面
      //   let NewPage = '_empty' + '?time=' + new Date().getTime() / 1000
      //   // 之后将页面push进去
      //   this.$router.push(NewPage)
      //   // 再次返回上一页即可
      //   setTimeout(() => {
      //     this.$router.go(-1)
      //   }, 50)
      // },
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import "../../style/entry/components/pageCommon";

  .page-result {
    display: flex;
    flex-direction: column;
  }

  .page-result .normal-operate {
    height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
  }

  .page-result .special-operate {
    margin-top: -16px;
    margin-bottom: 10px;
    font-size: 12px;
    .maintainIng {
      margin-right: 30px;
    }
    .el-checkbox__label {
      font-size: 12px;
      padding-left: 4px;

    }
  }

  .th-color th {
    background-color: #EAF0FA !important;
  }

  .page-bar-operate {
    display: flex;
    flex-direction: row;
  }

  /*.page-bar-operate .page-name {*/
    /*margin-right: 13px;*/
  /*}*/

  .page-bar-operate .page-fresh {
    padding: 0 10px;
    color: #3277E9;
    cursor: pointer;
  }

  .page-status {
    position: relative;
    /*margin-left: 20px;*/
    display: flex;
    align-items: center;
  }

  .page-status img {
    width: 15px;
    margin-right: 5px;
  }

  .waiting img {
    animation: re-rotate 2s infinite linear;
  }

  // 等待旋转
  @keyframes re-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .page-number {
    display: flex;
    align-items: center;
    .el-pagination {
      display: flex;
      align-items: center;
      ul {
        display: flex;
        align-items: center;
      }
    }
  }

  .el-pager {
    display: flex;
    align-items: center;
  }

  .el-input--suffix input {
    width: 100% !important;
  }

</style>
